<template>
<div>
  <div class="opt-area-02">
    <div class="left-con">
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="司机姓名" style="width: 164px" v-model="params.driver_name"/>
      </div>
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="司机身份证号" style="width: 164px" v-model="params.driver_cardno"/>
      </div>
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="司机联系方式" style="width: 164px" v-model="params.driver_tel"/>
      </div>
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="车牌号" style="width: 164px" v-model="params.car_number"/>
      </div>
      <Button type="primary" @click="findTable">查询</Button>
    </div>
    <div class="left-con" style="margin-top: 5px">
      <div class="input-frame" style="width: 164px">
        <Select v-model="params.arrive_type_one" style="width:164px" placeholder="备案类型">
          <Option value="1">出锦</Option>
          <Option value="2">入锦</Option>
        </Select>
      </div>
      <div class="input-frame" style="width: 164px">
        <Select v-model="params.arrive_type_two" style="width:164px" placeholder="入锦类型">
          <Option value="1">返锦</Option>
          <Option value="2">来锦</Option>
        </Select>
      </div>
    </div>
  </div>
  <Table border :columns="tableColumns" :data="tableData">
    <template slot-scope="{ row, index }" slot="arrive_type_one">
      <span v-if="row.arrive_type_one === '1'">出锦</span>
      <span v-if="row.arrive_type_one === '2'">入锦</span>
    </template>
    <template slot-scope="{ row, index }" slot="arrive_type_two">
      <span v-show="row.arrive_type_two === '1'">返锦</span>
      <span v-show="row.arrive_type_two === '2'">来锦</span>
    </template>
    <template slot-scope="{ row, index }" slot="action">
      <Button type="primary" size="small" style="margin-right: 5px" @click="showDetail(row)">详情</Button>
      <Button type="warning" class="actionBtn" size="small" @click="getCarLine(row)">消杀详情</Button>
    </template>
  </Table>
  <Modal title="消杀详情"  v-model="value1">
    <Form  :label-width="80">
      <FormItem label="消杀位置:">
        <Input v-model="disinfection.disinfection_wz" disabled ></Input>
      </FormItem>
      <FormItem label="消杀时间:">
        <Input v-model="disinfection.disinfection_time" disabled ></Input>
      </FormItem>
      <FormItem label="消杀人员:">
        <Input v-model="disinfection.disinfection_people" disabled ></Input>
      </FormItem>
      <FormItem label="消杀部位:">
        <Input v-model="disinfection.disinfection_bw" disabled ></Input>
      </FormItem>
    </Form>
  </Modal>
  <Row type="flex" justify="end" class="page_style">
    <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
          @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  </Row>
  <record-detail ref="recordDetail"></record-detail>
</div>
</template>

<script>
import { getCargoTransportationAll } from '../../api/eventlist'
import expandRow from '@/view/record_expand/table-expand'
import RecordDetail from '@/view/record_detail'

export default {
  name: 'index',
  components: {
    RecordDetail, // 详情
    expandRow // 表格展开
  },
  data () {
    return {
      value1: false,
      disinfection: {},
      tableColumns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '驾驶员姓名',
          key: 'driver_name',
          align: 'center'
        },
        {
          title: '驾驶员联系方式',
          key: 'driver_tel',
          align: 'center'
        },
        {
          title: '驾驶员身份证号',
          key: 'driver_cardno',
          align: 'center'
        },
        {
          title: '车牌号',
          key: 'car_number',
          align: 'center'
        },
        {
          title: '（出/入）锦时间',
          key: 'create_time',
          align: 'center'
        },
        {
          title: '备案类型',
          slot: 'arrive_type_one',
          align: 'center'
        },
        {
          title: '入锦类型',
          slot: 'arrive_type_two',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      tableData: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        driver_name: '',
        driver_cardno: '',
        driver_tel: '',
        car_number: '',
        arrive_type_one: '',
        arrive_type_two: '',
        car_is_ll: '1'
      }
    }
  },
  methods: {
    pageAction (page) {
      this.params.pageNo = page
      this.findTable()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findTable(this.params.pageNo)
    },
    findTable () {
      let data = this.params
      console.log(data)
      getCargoTransportationAll(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.params.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
        }
      })
    },
    showDetail (e) {
      this.$refs.recordDetail.init(e)
    },
    getCarLine (e) {
      this.disinfection = e
      this.value1 = true
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.findTable()
  }
}
</script>

<style scoped>
.page_style{
  margin-top: 10px;
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.demo-spin-container{
  display: inline-block;
  width: 100%;
  /*//height: 400px;*/
  position: relative;
  /*//border: 1px solid #eee;*/
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}
</style>
